<template>
    <div>
        <div id="radar" class="tl-width-100-percent tl-height-400"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { list } from '@/api/category/category';

export default {
    name: 'Radar',
    components: {},
    data () {
        const radarOption = {
            title: {
                left: 'center',
                // text: '文章分类雷达图',
                textStyle: { fontSize: 24 }
            },
            tooltip: {
                confine: true,
                textStyle: { fontSize: 12, fontFamily: ['Courier New', '等线'] }
            },
            legend: {
                data: []
            },
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#999',
                        fontFamily: ['Courier New', '等线'],
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [],
                // radius: 120,
                center: ['50%', '50%']
            },
            series: [{
                type: 'radar',
                itemStyle: { normal: { color: '#1890ff' } },
                areaStyle: { normal: { color: '#1890ff' } },
                label: { normal: { fontFamily: ['Courier New', '等线'], show: true } },
                data: [{
                    value: [],
                    name: '文章分类数量'
                }]
            }]
        };
        return {
            radarOption,
            cate: []
        }
    },
    methods: {
        async getTypeList () {
            const res = await list();
            if (res.code === 200) {
                this.cate = res.data.rows;
            }
        }
    },
    created () {
    },
    mounted () {
        this.$nextTick(() => {
            const radarChart = echarts.init(document.getElementById('radar'));
            this.getTypeList().then(() => {
                const max = Math.max.apply(Math, this.cate.map(o => o.value));
                this.cate.forEach((cate) => {
                    this.radarOption.radar.indicator.push({ name: cate.name, max: max * 1.5 });
                    this.radarOption.series[0].data[0].value.push(cate.value)
                })
                console.log(this.cate)
                console.log(this.radarOption)
                // 基于准备好的dom，初始化eCharts实例
                // 使用刚指定的配置项和数据显示图表。
                radarChart.setOption(this.radarOption);
            })
        })
    }
}
</script>

<style lang='less' scoped>

</style>
